<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在组件上使用v-model</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 这个知识点的主要难点：v-model的绑定到底是什么 -->
        <!-- 个人猜测： -->
        <!-- v-model实现的是表单输入与输入状态之间的数据双向绑定，所以v-model绑定的值必须是data或computed中的属性 -->
        <!-- 所以searchText必须为计算方法： 值与value互相关联 -->

        <!-- 自定义事件也可以创建支持v-model的自定义输入组件：即自定义事件可以用在自定义组件上 -->
        比如：
        <input v-model="searchText"><br>
        等价于；
        <input v-bind:value="searchText" v-on:input="searchText = $event.target.value"><br>
        等价于：用在自定义组件上：
        <!-- 为了使组件工作，组件内的input必须：将value特性绑定在一个叫value的prop上，将其input事件触发时，新的值通过自定义的input事件抛出 -->
        <custom-input v-bind:value="searchText" v-on:input="searchText = $event"></custom-input><br>


        等价于：用在自定义组件上：
        <custom-input v-model="searchText"></custom-input><br>
        <p>实时输出： {{ value }}</p>
    </div>
    <script>
        Vue.component("custom-input", {
            props: ["value"],
            template: `
                <input
                    v-bind:value='value'
                    v-on:input="$emit('input', $event.target.value)"
                >
            `
        });
        var app = new Vue({
            el: "#app",
            data: {
                value: "",

            },
            computed: {
                searchText: {
                    set: function (value) {
                        this.value = value;
                    },
                    get: function () {
                        return this.value;
                    }
                }
            }
        })
    </script>
</body>

</html>